<template>
  <div style="display: flex; flex-direction: column; margin: 10px">
    <div class="title">应用合并</div>
    <div class="merge">
      <div class="logo">
        <img style="width: 148px; height: 148px" :src="form.in_icon" alt="" />
        <div>{{ form.in_name }}</div>
      </div>
      <div class="needMerge">
        <div>
          <div
            v-if="!form.in_kid"
            @click="onUnload"
            style="width: 148px; height: 148px; border: 1px solid #eee"
          >
            <div style="font-size: 50px; line-height: 148px">+</div>
          </div>
          <img
            v-else
            :src="AppDetailsData.in_icon"
            alt=""
            width=""
            style="width: 148px; height: 148px; border: 1px solid #eee"
          />
        </div>

        <div>
          <div v-if="!form.in_kid">
            <div style="margin-top: 10px">选择需要合并的应用</div>
          </div>
          <div
            v-else
            style="margin-top: 10px; display: flex; flex-direction: column"
          >
            {{ AppDetailsData.in_name }}
            <el-button type="text" @click="onUntie">解绑</el-button>
          </div>
        </div>
      </div>
    </div>
    <div>
      <h4 style="color: red; font-size: 14px; margin: 10px 0 10px">温馨提示</h4>
      <p style="font-size: 14px">
        合并后的两个应用，进入任一个应用的单页，扫描二维码，会根据你的手机系统自动帮你下载相应的版本。
      </p>
    </div>

    <el-dialog
      title="选择要合并的应用"
      :visible="centerDialogVisible"
      width="40%"
      center
      @close="centerDialogVisible = false"
    >
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="应用图标">
            <template slot-scope="scope">
              <img :src="scope.row.in_icon" alt="" width="50" />
            </template>
          </el-table-column>
          <el-table-column prop="in_name" label="应用名称"> </el-table-column>
          <el-table-column prop="in_mnvs" label="应用版本"> </el-table-column>
          <el-table-column
            prop="in_addtime"
            label="上传时间"
            width="200"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-radio v-model="in_kid" :label="scope.row.in_id"
                >应用ID:{{ scope.row.in_id }}</el-radio
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAppList, appMerge, getAppDetails, mergeCancel } from '@/api/App';

export default {
  props: ['list'],
  data() {
    return {
      centerDialogVisible: false,
      tableData: [],
      AppDetailsData: {}, //kid数据
      in_kid: '',
      form: []
    };
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      //合并的信息
      async handler() {
        this.form = JSON.parse(JSON.stringify(this.list));
        if (this.form.in_kid) {
          let { data } = await getAppDetails(this.form.in_kid);
          this.AppDetailsData = data;
          this.AppDetailsData = this.AppDetailsData.app_info;
        }
      }
    }
  },
  async created() {
    this.form = JSON.parse(JSON.stringify(this.list));
    if (this.list.in_kid) {
      let { data } = await getAppDetails(this.form.in_kid);
      this.AppDetailsData = data;
      this.AppDetailsData = this.AppDetailsData.app_info;
    }
  },
  methods: {
    //应用
    async getList() {
      let { data } = await getAppList({ page: '1', limit: '9999' });
      this.tableData = data.filter((v) => {
        return this.form.in_id !== v.in_id && v.in_kid === 0;
      });
    },
    //上传
    onUnload() {
      this.centerDialogVisible = true;
      this.getList();
    },
    //合并
    async onConfirm() {
      if (!this.in_kid) return this.$message.warning('请选择应用');
      await appMerge({ in_id: this.form.in_id, in_kid: this.in_kid });
      this.centerDialogVisible = false;
      this.$message({
        type: 'success',
        message: '合并成功!'
      });
      window.location.reload();
    },
    //解绑
    async onUntie() {
      await this.$confirm('是否取消合并?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await mergeCancel(this.form.in_id + '');
          this.$message({
            type: 'success',
            message: '解绑成功!'
          });
          window.location.reload();
        })
        .catch(() => {
          // 用户点击取消按钮时的操作
          this.$message({
            type: 'info',
            message: '已取消解绑操作'
          });
        });
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 18px;
  color: #3383c5;
  padding-bottom: 30px;
}

.merge {
  padding: 50px 0 50px 0;
  display: flex;
  border: 1px solid #eee;
  text-align: center;
  justify-content: space-around;
  align-items: stretch;
}
</style>
